

<template>
  <vxe-grid ref="gridTable" v-bind="gridOptions" v-on="gridEvents">
    <template #actionItem>
      <vxe-button status="primary" @click="formSubmit">搜索</vxe-button>
      <vxe-button @click="formReset">重置</vxe-button>
      <vxe-button status="primary" @click="visibleFlag = !visibleFlag">新增</vxe-button>
      <vxe-button status="error" @click="delRowMethod">删除</vxe-button>
    </template>

    <template #basicKey="{ row }">
        <a
            :href="row.basicValue"
            target="_blank"
            style="color: #0a33e1; text-decoration: none;"
        >
            <h3>{{row?.basicKey}}</h3>
        </a>
    </template>
  </vxe-grid>
  <lay-layer v-model="visibleFlag" title="新增" :shade="false" :area="['500px', '350px']">
    <lay-form :model="formData" ref="layFormRef5" required style="margin-top: 10px">
      <lay-form-item label="系统名称" prop="basicKey">
        <lay-input v-model="formData.basicKey" style="width: 90%;"></lay-input>
      </lay-form-item>
      <lay-form-item label="URL路径" prop="basicValue">
        <lay-input v-model="formData.basicValue" style="width: 90%;"></lay-input>
      </lay-form-item>
            <lay-form-item label="备注" prop="description">
        <lay-input v-model="formData.description" style="width: 90%;"></lay-input>
      </lay-form-item>
      <lay-form-item style="text-align: center">
        <lay-button @click="addRowMethod" type="primary">提交</lay-button>
      </lay-form-item>
    </lay-form>
  </lay-layer>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import type { VxeGridProps, VxeGridListeners  } from 'vxe-table'
import {addRowConfigApi, delUrls, queryUrls} from "../../api/fastApi/generator";
import {notify} from "../../untils/tip";

const {group} = defineProps({
  group: {
    type: String,
    default: 'sys_url'
  }
})

interface ConfigRowVO {
  id: number|null
  groupName: string
  basicKey: string
  basicValue: string
  description: string
}

const gridTable = ref()
const visibleFlag = ref(false)

const formData = reactive<ConfigRowVO>({
  id: null,
  groupName: group,
  basicKey: '',
  basicValue: '',
  description: ''
})

onMounted(() => {
  querySysUrlsMethod();
})

const gridOptions = reactive<VxeGridProps<ConfigRowVO>>({
  showOverflow: true,
  border: true,
  height: 800,
  formConfig: {
    data: {
      basicKey: '',
    },
    items: [
      { field: 'basicKey', title: '名称', itemRender: { name: 'VxeInput' } },
      {
        itemRender: {
          name: 'VxeButtonGroup',
          options: [
            { type: 'submit', content: '搜索', status: 'primary' },
            { type: 'reset', content: '重置',}
          ]
        },
        slots: { default: 'actionItem' }
      }
    ]
  },
  columns: [
    { type: 'checkbox', width: 70 },
    { field: 'basicKey', title: '系统URL', slots: { default: 'basicKey' } },
    { field: 'description', title: '备注' }
  ],
  data: []
})

const gridEvents: VxeGridListeners = {

}

const formSubmit = () => {
    querySysUrlsMethod();
    console.log('form submit', gridOptions.formConfig.data.basicKey);
}

const formReset = () => {
    gridOptions.formConfig.data.basicKey = '';
    console.log('form reset')
}

const addRowMethod = () => {
  console.log('addRowMethod:', formData)
  if (formData.basicKey && formData.basicValue) {
    addRowConfigApi(formData).then(res => {
      querySysUrlsMethod();
      notify("success", "添加成功")
      visibleFlag.value = false;
    })
  }
}

const querySysUrlsMethod = async () => {
  const params = reactive({
    asc: false,
    page: 1,
    limit: 50,
    groupName: formData.groupName,
    basicKey: gridOptions.formConfig.data.basicKey,
  })
  await queryUrls(params).then(res => {
    gridOptions.data = res.data.list;
  })
}

const delRowMethod = () => {
  const $grid = gridTable.value;
  if($grid){
    const selectRecords = $grid.getCheckboxRecords();
    selectRecords.forEach((item: ConfigRowVO)=>{
      delUrls(item.id);
    })
    console.log('selectRecords:', selectRecords)
    querySysUrlsMethod();
  }
}

</script>

<style scoped>


</style>